<template>
	<view>
		<!-- 数据概览 -->
		<view class="situation_contain">
			<view class="situation_date">
				<image class="date_icon" src="../../static/pre.png" @click="toLastmonth"></image>
				<picker mode="date" :value="date" fields="month" start="2018-09-01" end="2021-09-01" @change="bindDateChange"> 
					<view class="picker">
						{{date}}
					</view>
				</picker>
				<image class="date_icon" src="../../static/next.png" @click="toNextmonth"></image>
			</view>
			<!-- 日期组件 -->
			<chenmushan-week-calendar @changeDate="changeDate"></chenmushan-week-calendar>
			<!-- 账单明细 -->
			<view class="situation_detail">
				<view>账单明细</view>
				<view>2021年3月16日</view>
			</view>
			<view class="divider"></view>
			<!-- 总数据 -->
			<view style="display: flex; justify-content: space-between;">
				<view class="situation_all">
					<view>总收入</view>
					<view>{{income_all}}</view>
				</view>
				<view class="longitudinal"></view>
				<view class="situation_all">
					<view>总支出</view>
					<view>{{spending_all}}</view>
				</view>
			</view>
		</view>
		<!-- 收入明细 -->
		<view class="income_contain">
			<view v-for="(item, index) in income_content" :key="index">
				<view class="income_item">
					<view>{{item.name}}</view>
					<view>￥{{item.value}}</view>
				</view>
				<!-- 内容明细 -->
				<view class="income_detail" v-for="(item, index) in item.detail" :key="index" v-if="item.detail == null">
					<view>{{item.name}}</view>
					<view>￥{{item.value}}</view>
				</view>
				<view class="divider" v-if="index != income_content.length - 1"></view>
			</view>
		</view>
		<!-- 运营成本 -->
		<view class="operating_contain">
			<view v-for="(item, index) in operating_content" :key="index">
				<view class="income_item">
					<view>{{item.name}}</view>
					<view>￥{{item.value}}</view>
				</view>
				<!-- 内容明细 -->
				<view class="income_detail" v-for="(item, index) in item.detail" :key="index" v-if="item.detail == null">
					<view>{{item.name}}</view>
					<view>￥{{item.value}}</view>
				</view>
				<view class="divider" v-if="index != income_content.length - 1"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import dateUtil from '../../util/dateUtil.js';
	export default {
		data() {
			return {
				income_all: 0,
				spending_all: 0,
				date: '2021年3月',
				income_content: [
					{
						name: '乐器收入',
						value: 10000.00,
						detail: [
							{
								name: '备注：吉他',
								value: 5000.00,
							},
							{
								name: '备注：架子鼓',
								value: 5000,
							}
						]
					},
					{
						name: '活动收入',
						value: 5500.00
					},
					{
						name: '其他收入',
						value: 3000.00
					}
				],
				operating_content: [
					{
						name: '运营成本',
						value: 5000.00,
						detail: [
							{
								name: '培训费',
								value: 2000.00,
							},{
								name: '乐器采购',
								value: 1000.00,
							},{
								name: '其他教材成本',
								value: 2000.00,
							}
						]
					},
					{
						name: '管理成本',
						value: 0.00,
						detail: [
							{
								name: '地租',
								value: 0.00
							},{
								name: '水电费',
								value: 0.00
							},{
								name: '财务费用',
								value: 0.00
							},{
								name: '店长工资',
								value: 0.00
							},{
								name: '兼职人员费用',
								value: 0.00
							},{
								name: '其他管理费用',
								value: 0.00
							}
						]
					},
					{
						name: '销售成本',
						value: 5500.00,
						detail: [
							{
								name: '广告费用',
								value: 500.00
							},{
								name: '招生提成',
								value: 1000.00
							},{
								name: '活动费用',
								value: 4000.00
							},{
								name: '其他销售费用',
								value: 0.00
							}
							
						]
					}
				]
			}
		},
		onLoad() {
			let income_all = 0, spending_all = 0;
			let income = this.income_content;
			let spending = this.operating_content;
			income.forEach(item =>{
				income_all += item.value*1;
			})
			spending.forEach(item =>{
				spending_all += item.value*1;
			})
			this.income_all = income_all;
			this.spending_all = spending_all;
		},
		methods: {
			// 时间选择器
			bindDateChange: function(e) {
				this.date = dateUtil.formatDate(e.detail.value);
			},
			// 查看上一个月
			toLastmonth: function(){
				var date = new Date(dateUtil.toDate(this.date));
				var lastDate = new Date(date.getTime() - 1000*3600*24*28);
				this.date = dateUtil.formatDate(lastDate);
			},
			// 查看下一个月
			toNextmonth: function(){
				var date = new Date(dateUtil.toDate(this.date));
				var nextDate = new Date(date.getTime() + 1000*3600*24*31);
				this.date = dateUtil.formatDate(nextDate);
			},
		}
	}
</script>

<style>
	page{
		background-color: #F3F5F7;
	}
	
	.situation_contain{
		width: 100%;
		/* height: 300rpx; */
		background-color: #FD973F;
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
		display: flex;
		flex-direction: column;
	}
	
	.situation_date {
		display: flex;
		justify-content: space-between;
		margin: 30rpx 30rpx;
		color: #fff;
	}
	
	.date_icon {
		width: 50rpx;
		height: 50rpx;
	}
	
	.situation_detail{
		display: flex;
		color: #fff;
		font-size: 28rpx;
		justify-content: space-between;
	}
	
	.situation_detail view{
		width: 50%;
		text-align: center;
		margin-top: 10rpx;
	}
	
	.divider {
		height: 2rpx;
		width: 100%;
		background-color: #eee;
		margin: 20rpx 0;
	}
	
	.longitudinal {
		height: 100rpx;
		margin: -20rpx 0;
		width: 2rpx;
		background-color: #eee;
	}
	
	.situation_all{
		display: flex;
		flex-direction: column;
		text-align: center;
		font-size: 30rpx;
		color: #fff;
		width: 50%;
	}
	
	/* 收入明细 */
	.income_contain{
		background-color: #fff;
		/* height: 300rpx; */
		display: flex;
		flex-direction: column;
		padding: 20rpx 40rpx;
	}
	
	.income_item{
		display: flex;
		justify-content: space-between;
	}
	
	.income_detail{
		display: flex;
		justify-content: space-between;
		color: #FD973F;
		font-size: 28rpx;
		margin-top: 10rpx;
		margin-bottom: 15rpx;
		margin-left: 60rpx;
	}
	
	/* 运营成本 */
	.operating_contain{
		margin-top: 20rpx;
		margin-bottom: 60rpx;
		background-color: #fff;
		/* height: 300rpx; */
		display: flex;
		flex-direction: column;
		padding: 20rpx 40rpx;
		border-bottom-left-radius: 24rpx;
		border-bottom-right-radius: 24rpx;
		box-shadow: 0rpx 10rpx 15rpx 1rpx #888888;
	}

</style>
